<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">

    <title>itsm-front</title>

    <meta name="description" content="A framework for easily creating beautiful presentations using HTML">
    <meta name="author" content="Hakim El Hattab">

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <link rel="stylesheet" href="../css/reveal.css">
    <link rel="stylesheet" href="../css/theme/black.css" id="theme">

    <!-- Theme used for syntax highlighting of code -->
    <link rel="stylesheet" href="../lib/css/zenburn.css">

    <!-- Printing and PDF exports -->
    <script>
      var link = document.createElement( 'link' );
      link.rel = 'stylesheet';
      link.type = 'text/css';
      link.href = window.location.search.match( /print-pdf/gi ) ? '../css/print/pdf.css' : '../css/print/paper.css';
      document.getElementsByTagName( 'head' )[0].appendChild( link );
    </script>

    <!--[if lt IE 9]>
    <script src="lib/js/html5shiv.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="/node_modules/hy5b/list/list.css">
    <link rel="stylesheet" type="text/css" href="uyun-itsm/style.css">
  </head>

  <body>

    <div class="reveal">

      <!-- Any section element inside of this container is displayed as a slide -->
      <div class="slides">
        <section>
          <h2>往事：前端技术的变迁</h2>
          <section>
            <h3>jquery, jquey 插件</h3>
            <p>方便地处理DOM、events、实现动画效果，并且方便地为网站提供AJAX交互</p>
          </section>
          <section>
            <h3>commonjs/cmd/amd 模块定义规范</h3>
            <p>commonjs是nodejs的写法</p>
            <p>便于模块化，配合模块加载器</p>
            <p>提高了代码复用性</p>
          </section>
          <section>
            <h3>backbone/angular/ember 等MV*框架</h3>
            <p>表现与形为分离</p>
            <p>便于维护和扩展</p>
          </section>
          <section>
            <h3>react/vue 轻量化的V层</h3>
            <p>react virtualDOM出色的性能</p>
          </section>
        </section>

        <section>
          <h2>开发工具: react全家桶</h2>
          <section data-markdown>
            ### react
            
            * 中文文档地址 http://reactjs.cn/react/docs/getting-started-zh-CN.html
            * 阮一峰的 "React 入门实例教程" http://www.ruanyifeng.com/blog/2015/03/react.html
            * 极客学院整理的文档 http://wiki.jikexueyuan.com/project/react/
          </section>

          <section data-markdown>
            ### react-dom

            ```js
            // main.js
            var React = require('react');
            var ReactDOM = require('react-dom');

            ReactDOM.render(
              <h1>Hello, world!</h1>,
              document.getElementById('example')
            );
            ```
          </section>

          <section data-markdown>
            ### react-router

            * React Router 中文文档 http://react-guide.github.io/react-router-cn/
          </section>

          <section data-markdown>
            ### reflux 0.4.1

            因为react只提供了一个view层，所以还需要配套的M(stores)和C(actions)层

            * RefluxJS学习笔记 http://www.uyunsoft.cn/kb/pages/viewpage.action?pageId=8946041
          </section>

          <section data-markdown>
            ### antd 0.12.17

            * 
          </section>

          <section data-markdown>
            ### webpack

            模块打包工具，有了它就可以使用 CommonJS 开发模块了

            * Webpack 中文指南 http://zhaoda.net/webpack-handbook/
            * webpack 学习心得 http://www.uyunsoft.cn/kb/pages/viewpage.action?pageId=8945751
          </section>
        </section>

        <section>
          <h2>编码规范</h2>
          <section data-markdown>
            ### 目录结构

            ```
            app - 项目代码
              ├ src - 源代码, 目录结构参考 public
              ├ web - 静态资源目录
            node_modules - npm下载的包目录 
            ns1.0 - 调试服务器
              ├ api - 模拟后台api接口
                ├ data - 模拟后台数据（json格式）
            public - 公用模块, 以 git submodule 引入
            webpack - webpack配置文件
            package.json npm配置文件
            ```

            [前端框架目录通用规范](http://www.uyunsoft.cn/kb/pages/viewpage.action?pageId=8945705)
          </section>

          <section data-markdown>
            ### 静态资源目录

            ```
            ├─assets
            │  ├─css
            │  ├─fonts
            │  ├─images
            │  └─js
            ├─build 源代码编译结果
            └─index.html
            ```
          </section>

          <section>
            <p>换肤与国际化支持</p>
          </section>
        </section>
        <section>
          <h3>一个例子</h3>
          <p><a href="https://git.uyunsoft.cn/hornet/web/commit/91f5d03006c67bcfde478a6a7d3b2165541e5c60">todoMVC</a></p>
        </section>

        <section>
          <h2>调试</h2>
          <section data-markdown>
            ### ns1.0 用来模拟后端返回数据
            
            * ns1.0/api/controllers/controller.js 配置url和json的连接
            * ns1.0/api/data 返回的json数据
          </section>
        </section>

        <section>
          <h2>打包和发布</h2>
          <p>生成到dist目录</p>
        </section>
      </div>

    </div>

    <script src="../lib/js/head.min.js"></script>
    <script src="../js/reveal.js"></script>

    <script>

      // More info https://github.com/hakimel/reveal.js#configuration
      Reveal.initialize({
        controls: true,
        progress: true,
        history: true,
        center: true,

        transition: 'slide', // none/fade/slide/convex/concave/zoom

        // More info https://github.com/hakimel/reveal.js#dependencies
        dependencies: [
          { src: '../lib/js/classList.js', condition: function() { return !document.body.classList; } },
          { src: '../plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
          { src: '../plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
          { src: '../plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
          { src: '../plugin/zoom-js/zoom.js', async: true },
          { src: '../plugin/notes/notes.js', async: true }
        ]
      });

    </script>

  </body>
</html>
